import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { Paper, List, ListItem, Avatar, Divider, TextField, IconButton } from '@mui/material';
import { ThemeProvider, createTheme } from "@mui/material/styles"
import { useState } from "react"
import CssBaseline from "@mui/material/CssBaseline"
import { Send as SendIcon, Person as PersonIcon, SmartToy as BotIcon } from "@mui/icons-material"


export function PersonalChatView() {
  return (
      <>
      <Typography variant="h4" sx={{ mb: { xs: 3, md: 5 } }}>
        Agent任务 
      </Typography>

      <Grid container spacing={3}>
        <Grid size={ {xs:12, md:6, lg: 8}}> 
          <ChatBox />
        </Grid>
      </Grid>
      </>
   
  );
}

const theme = createTheme({
  // palette: {
  //   primary: {
  //     main: "#1976d2",
  //   },
  //   secondary: {
  //     main: "#dc004e",
  //   },
  // },
})

interface Message {
  id: number
  text: string
  sender: "user" | "bot"
  timestamp: Date
}

export default function ChatBox() {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: 1,
      text: "Hello! How can I help you today?",
      sender: "bot",
      timestamp: new Date(),
    },
  ])
  const [inputValue, setInputValue] = useState("")

  const handleSendMessage = () => {
    if (inputValue.trim() === "") return

    const newMessage: Message = {
      id: messages.length + 1,
      text: inputValue,
      sender: "user",
      timestamp: new Date(),
    }

    setMessages((prev) => [...prev, newMessage])
    setInputValue("")

    // Simulate bot response
    setTimeout(() => {
      const botResponse: Message = {
        id: messages.length + 2,
        text: "Thanks for your message! This is a demo response.",
        sender: "bot",
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, botResponse])
    }, 1000)
  }

  const handleKeyPress = (event: React.KeyboardEvent) => {
    if (event.key === "Enter" && !event.shiftKey) {
      event.preventDefault()
      handleSendMessage()
    }
  }

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          minHeight: "100vh",
          bgcolor: "grey.100",
          p: 2,
        }}
      >
        <Paper
          elevation={3}
          sx={{
            width: "100%",
            maxWidth: 400,
            height: 600,
            display: "flex",
            flexDirection: "column",
            overflow: "hidden",
          }}
        >
          {/* Header */}
          <Box
            sx={{
              bgcolor: "primary.main",
              color: "white",
              p: 2,
              textAlign: "center",
            }}
          >
            <Typography variant="h6" component="h1">
              Chat Assistant
            </Typography>
          </Box>

          {/* Messages Area */}
          <Box
            sx={{
              flex: 1,
              overflow: "auto",
              bgcolor: "grey.50",
            }}
          >
            <List sx={{ p: 1 }}>
              {messages.map((message) => (
                <ListItem
                  key={message.id}
                  sx={{
                    display: "flex",
                    justifyContent: message.sender === "user" ? "flex-end" : "flex-start",
                    mb: 1,
                    px: 1,
                  }}
                >
                  <Box
                    sx={{
                      display: "flex",
                      alignItems: "flex-end",
                      maxWidth: "80%",
                      flexDirection: message.sender === "user" ? "row-reverse" : "row",
                    }}
                  >
                    <Avatar
                      sx={{
                        width: 32,
                        height: 32,
                        mx: 1,
                        bgcolor: message.sender === "user" ? "primary.main" : "secondary.main",
                      }}
                    >
                      {message.sender === "user" ? <PersonIcon /> : <BotIcon />}
                    </Avatar>
                    <Paper
                      sx={{
                        p: 1.5,
                        bgcolor: message.sender === "user" ? "primary.main" : "white",
                        color: message.sender === "user" ? "white" : "text.primary",
                        borderRadius: 2,
                        boxShadow: 1,
                      }}
                    >
                      <Typography variant="body2">{message.text}</Typography>
                      <Typography
                        variant="caption"
                        sx={{
                          display: "block",
                          mt: 0.5,
                          opacity: 0.7,
                          fontSize: "0.7rem",
                        }}
                      >
                        {message.timestamp.toLocaleTimeString([], {
                          hour: "2-digit",
                          minute: "2-digit",
                        })}
                      </Typography>
                    </Paper>
                  </Box>
                </ListItem>
              ))}
            </List>
          </Box>

          <Divider />

          {/* Input Area */}
          <Box
            sx={{
              p: 2,
              display: "flex",
              alignItems: "center",
              gap: 1,
              bgcolor: "white",
            }}
          >
            <TextField
              fullWidth
              variant="outlined"
              placeholder="Type your message..."
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyPress={handleKeyPress}
              size="small"
              multiline
              maxRows={3}
              sx={{
                "& .MuiOutlinedInput-root": {
                  borderRadius: 3,
                },
              }}
            />
            <IconButton
              color="primary"
              onClick={handleSendMessage}
              disabled={inputValue.trim() === ""}
              sx={{
                bgcolor: "primary.main",
                color: "white",
                "&:hover": {
                  bgcolor: "primary.dark",
                },
                "&:disabled": {
                  bgcolor: "grey.300",
                  color: "grey.500",
                },
              }}
            >
              <SendIcon />
            </IconButton>
          </Box>
        </Paper>
      </Box>
    </ThemeProvider>
  )
}
